function pageRenderTablejs(menu){ 
return `
<div class="box" id="app-main-${menu.index}">
    <div class="table-options-box" style="
      display: flex;
      height: 100%;
      width: 100%;
      overflow: hidden;
      flex-direction: column;
    ">
        <el-form class="zh-form" ref="refSearchForm" :model="formModelValue"
            :label-width="formconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
            style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
            <el-form-item v-for="(item, index) in formconfig.fieldList" :key="'form-item' + index" :label="item.label"
                :prop="item.prop" :label-width="item.labelWidth">
                <!-- 动态渲染表单项，这里以文本输入框为例 -->
                <el-input v-if="item.type === 'input'" v-model="formModelValue[item.prop]" clearable placeholder="请输入"></el-input>
                <!-- 根据不同类型的item渲染不同的表单项 -->
                <el-select v-if="item.type === 'select'" v-model="formModelValue[item.prop]" filterable remote :remote-method="remoteMethod" 
                :loading="selectLoading" clearable placeholder="请选择">
                    <el-option v-for="(x, index) in clientList" :key="x.value" :label="x.label"
                        :value="x.value"></el-option>
                </el-select>
                <el-date-picker v-if="item.type === 'date'" v-model="formModelValue[item.prop]" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getTableData">查询</el-button>
                <el-button type="success" @click="() => openAddEditModal('add')">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="refTable" class="zh-el-table" :data="tableData" size="default" row-key="id"
            :height="tableConfig.height || '100%'" :highlight-current-row="tableConfig.highlightCurrentRow">
            <el-table-column v-if="tableConfig.hasSelection" type="selection" width="50" align="center"
                reserve-selection>
            </el-table-column>
            <el-table-column v-if="tableConfig.hasIndex" type="index" width="60" label="序号" align="center">
            </el-table-column>
            <el-table-column v-for="(item, index) in tableConfig.columns" :key="index"
                :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop" :fixed="item.fixed"
                :sortable="item.sortable" :class-name="item.className">
            </el-table-column>
            <el-table-column v-if="tableConfig.actionColumn" fixed="right" :width="tableConfig.actionColumn?.width"
                :min-width="tableConfig.actionColumn?.minWidth" :label="tableConfig.actionColumn?.label" :align="
              tableConfig.actionColumn?.align
                  ? tableConfig.actionColumn.align
                  : 'center'
              ">
                <template #default="scope">
                    <el-button v-if="tableConfig.actionColumn?.hasRowEditAction" link type="primary" size="small"
                        :icon="Edit" @click="() => openAddEditModal('edit', scope.row)">编辑</el-button>
                    <el-button v-if="tableConfig.actionColumn?.hasRowDeleteAction" link type="danger" size="small"
                        :icon="Delete" @click.stop="rowDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" background
                layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

        <el-dialog v-model="addEditModal.show" v-if="addEditModal.show" :title="addEditModal.title"
            :closeOnClickModal="false" :top="addEditModal.top" :append-to-body="true" :close="addEditModal.cancel">
            <el-form class="zh-form" ref="refaddEditForm" :model="addEditFormModelValue"
                :label-width="addEditFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                <el-form-item v-for="(item, index) in addEditFormconfig.fieldList" :key="'form-item' + index"
                    :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                    <!-- 动态渲染表单项，这里以文本输入框为例 -->
                    <el-input v-if="item.type === 'input'" v-model="addEditFormModelValue[item.prop]"
                        :disabled="item.disabled" placeholder="请输入"></el-input>
                    <!-- 根据不同类型的item渲染不同的表单项 -->

                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addEditModal.cancel">取消</el-button>
                    <el-button type="primary" :loading="addEditModal.loadingSubmit"
                        @click="addEditModal.submit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</div>

<script type="module">
    (function () {
        const { createApp, ref, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = window.ElementPlus;
        const vue3Composition1 = {
            setup() {
                // 搜索表单
                const refSearchForm = ref();

                const formModelValue = ref({
                    test: "",
                });

                const formconfig = ref({
                    fieldList: [
                        { prop: "test", label: "测试", type: "input", labelWidth: "80px" },
                        {
                            prop: "test1",
                            label: "测试1",
                            type: "input",
                            labelWidth: "80px",
                        },
                    ],
                });

                const tableConfig = ref({
                    hasSelection: true,
                    hasIndex: true,
                    highlightCurrentRow: true,
                    columns: [
                        { label: "角色", prop: "test" },
                        { label: "角色1", prop: "id" },
                        { label: "角色2", prop: "role2" },
                    ],

                    actionColumn: {
                        label: "操作",
                        hasRowEditAction: true,
                        hasRowDeleteAction: true,
                        width: '150',
                    },
                });

                // 新增修改表单
                const refaddEditForm = ref();

                const addEditFormModelValue = ref({});

                const addEditFormconfig = ref({
                    fieldList: [
                        { prop: "test", label: "测试", type: "input", labelWidth: "80px" },
                        {
                            prop: "test1",
                            label: "测试1",
                            type: "input",
                            labelWidth: "80px",
                        },
                        {
                            prop: "test2",
                            label: "测试2",
                            type: "input",
                            labelWidth: "80px",
                        },
                        {
                            prop: "test3",
                            label: "测试3",
                            type: "input",
                            labelWidth: "80px",
                        },
                    ],
                });

                // 表格
                const tableData = ref([
                    { test: 1, id: 111, test1: 100, test2: 200, test3: 300, test4: 400 },
                    { test: 1, id: 1112, test1: 100, test2: 200, test3: 300, test4: 400 },
                ]);

                // 获取客户名称下拉
                const clientList = ref([
                    { label: "aa", value: "a" },
                    { label: "bb", value: "b" },
                    { label: "cc", value: "c" },
                ]);

                const selectLoading = ref(false)
                const remoteMethod = (query) => {
                    if (query) {
                        selectLoading.value = true
                        setTimeout(() => {
                        selectLoading.value = false
                        clientList.value = clientList.value.filter((item) => {
                            return item.label.toLowerCase().includes(query.toLowerCase())
                        })
                        }, 200)
                    } else {
                        clientList.value = []
                    }
                }

                // 分页
                const currentPage = ref(1);
                const pageSize = ref(100);
                const handleSizeChange = (val) => {
                    console.log("size change:", val);
                };
                const handleCurrentChange = (val) => {
                    console.log("current page:", val);
                };

                // 新增时获取项目编码及单据编号
                const getProjectNumber = async () => {
                    const res = await fetchData("https://cloud.lugangwool.com/server/getmaxnumber1.php?dbcl=", {
                        token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                        lxx: "PJA",
                        fhlx: "nd555"
                    }, {})
                    if (res && res.IsOk === "success") {
                        ElMessage.success(res.IsOk);
                        addEditModal.value.show = true;
                        addEditModal.value.title = "新增";
                        isEdit.value = "add";
                        addEditFormModelValue.value = addObj.value;
                        addEditFormModelValue.value.pja_project_code = res.data.fhzf;
                        addEditFormModelValue.value.documentno = res.data.fhzf;
                        addEditFormconfig.value.fieldList = addFieldList.value;
                    } else {
                        ElMessage.error(res.IsOk + ":获取项目编码失败");
                    }
                }

                // 获取表格数据
                const getTableData = async () => {
                    const res = await fetchData(
                        "https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                        {
                            data: { ...formModelValue.value },
                            kjdata: "creationtime",
                            ksdate: formModelValue.value.pja_start_time,
                            jsdate: formModelValue.value.pja_end_time,
                            token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                            datatab:
                                "988e2kQvfVuvgEOj4oAwisoKMRFIPZp3HLIaVpGUBW0qeHkhKCbdr61tTWhw",
                        },
                        {}
                    );
                    tableData.value = res;
                };

                // 提交表单
                const submitForm = async () => {
                    const res = await fetchData("https://cloud.lugangwool.com/server/setkehuzlapi.php?dbcl=", {
                        data: { ...addEditFormModelValue.value },
                        token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                        datatab: "988e2kQvfVuvgEOj4oAwisoKMRFIPZp3HLIaVpGUBW0qeHkhKCbdr61tTWhw"
                    }, {});
                    console.log("submitressss:", res);
                    if (res.IsOk === "success") {
                        refaddEditForm.value.resetFields();
                        addEditModal.value.show = false;
                        getTableData();
                        ElMessage.success(res.sqltext);
                    } else {
                        ElMessage.error(res.sqltext);
                    }
                }

                // 取消表单提交
                const cancelFormSubmit = () => {
                    refaddEditForm.value.resetFields();
                    addEditModal.value.show = false;
                }

                const addEditModal = ref({
                    show: false,
                    row: {},
                    submit: submitForm,
                    cancel: cancelFormSubmit
                });

                const addObj = ref({});
                const addFieldList = ref([]);
                const editFieldList = ref([]);
                const isEdit = ref("add");
                const openAddEditModal = (type, row) => {
                    if (type == "add") {
                        getProjectNumber();
                    } else if (type == "edit") {
                        addEditModal.value.title = "编辑";
                        addEditModal.value.show = true;
                        isEdit.value = "edit";
                        addEditFormconfig.value.fieldList = editFieldList.value;
                        addEditModal.value.row = row;
                        addEditFormModelValue.value = { ...row };
                    }
                };

                // 删除
                const deleteRowRecord = async (row) => {
                    const res = await fetchData("https://cloud.lugangwool.com/server/getdatalisapi.php?dbcl=", {
                        data: {
                            ddd: [{
                                documentno: row.documentno
                            }]
                        },
                        token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                        workid: "3d21fbc6-0aad-1e97-b382-c91245057fdd",
                        sqlviw1: true
                    }, {});
                    if (res.IsOk === "success") {
                        getTableData();
                        ElMessage.success(res.message);
                    } else {
                        ElMessage.error(res.message);
                    }
                }
                const rowDelete = async (row) => {
                    ElMessageBox.alert('是否确定删除该条记录？', '提示', {
                        confirmButtonText: '确定',
                        callback: async (action) => {
                            if (action === "confirm") {
                                deleteRowRecord(row);
                            } else { }
                        },
                    })
                }

                onMounted(async () => {
                    // 获取表头
                    const res = await fetchData(
                        "https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=",
                        { xgid: "544", dataviw: "DataTable" },
                        {}
                    );
                    tableConfig.value.columns = res.map((x) => {
                        return {
                            label: x.title,
                            prop: x.field,
                            width: x.width,
                        };
                    });

                    // 设置搜索配置项
                    const obj = {};
                    res.filter((x, index) => {
                        if (index === 1 || index === 5 || index === 6) {
                            obj[x.field] = "";
                        }
                    })
                    formconfig.value.fieldList = res.filter((x, index) => index === 1 || index === 4 || index === 5 || index === 6).map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input"
                        }
                    });
                    formModelValue.value = obj;

                    // 设置新增、修改的配置
                    res.filter((x) => {
                        if (x.sfbaocun === "1") {
                            addObj.value[x.field] = "";
                        }
                    })
                    addFieldList.value = res.filter((x) => x.sfbaocun === "1").map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: "input",
                            // type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                            disabled: item.readonly === "1" ? true : false
                        }
                    });
                    editFieldList.value = res.filter((x) => x.sfbaocun === "1").map((item) => {
                        return {
                            label: item.title + ":",
                            prop: item.field,
                            type: "input",
                            // type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                            disabled: item.readonly === "1" ? true : false
                        }
                    });

                    // 获取表格数据
                    getTableData();
                });

                return {
                    formconfig,
                    formModelValue,
                    tableConfig,
                    tableData,
                    currentPage,
                    pageSize,
                    handleSizeChange,
                    handleCurrentChange,
                    addEditModal,
                    openAddEditModal,
                    refaddEditForm,
                    addEditFormModelValue,
                    addEditFormconfig,
                    getTableData,
                    rowDelete,
                    clientList
                };
            },
        };
        const app1 = createApp(vue3Composition1);
        // 遍历挂载element plus icons
        for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
            app1.component(name, comp);
        }

        app1.use(ElementPlus).mount("#app-main-${menu.index}");
        return app1;
    })();
</script>

<style>
    .box {
        height: 100%;
    }

    .table-options-box .zh-form {
        flex: 1;
    }

    .table-options-box .pagination {
        padding: 10px 0 0 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
</style>
`; }